<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>鼠标悬浮动画 - H5游戏 | jQuery特效|H5网站特效| H5游戏</title>
<meta name="keywords" content="canvas动画, 手机微信网站特效, css3动画, html5特效, 网页特效" />
<meta name="description" content="网页特效库-专注于HTML5、CSS3、js、jQuery、手机移动端等网页特效的手机与分享。所有的资源都免费提供广大童鞋下载学习和使用。" />
		
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/pater.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		
		<script>
			document.documentElement.className = 'js';
		</script>
	</head>
	<body class="loading">
		
		<main>
			<section class="content content--c1">
				<div class="pater">
					<svg class="pater__svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 280 800" data-path-hover="M 0,0 280,0 280,800 0,800 Z">
						<clipPath id="pater-clip">
							<path d="M 0,0 280,0 0,400 0,800 Z" overflow="visible"/>
						</clipPath>
						<g class="pater__clip" clip-path="url(#pater-clip)">
							<image overflow="visible" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="img/sponsor/bg.jpg"></image>
						</g>
					</svg>
					<div class="pater__content">
						<img class="pater__logo" src="img/sponsor/jupiter_logo.svg" alt="Jupiter Logo" />
						<span class="pater__title">The go-to WordPress theme for many U.S. based agencies</span>
						<span class="pater__more">Hover for more</span>
						<div class="pater__hover">
							<div>Limitless Web Design Experience</div>
							<div>Powering 50000+ High-end Business Websites</div>
							<div>Build a Website. NO Limit. NO Code.</div>
							
						</div>
					</div>
				</div>
				
				
				<a href="#" class="tilter tilter--1">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/1.jpg" alt="img01" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Tanya Bondesta</h3>
							<p class="tilter__description">Toronto</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--1">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/2.jpg" alt="img02" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Walter Anderson</h3>
							<p class="tilter__description">Stockholm</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			<section class="content content--c2">
				<a href="#" class="tilter tilter--2">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/3.jpg" alt="img03" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Helen Portland</h3>
							<p class="tilter__description">Seattle</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--2">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/4.jpg" alt="img04" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Kara Greene</h3>
							<p class="tilter__description">New York</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			<section class="content content--c3">
				<a href="#" class="tilter tilter--3">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/5.jpg" alt="img05" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Frank Hausman</h3>
							<p class="tilter__description">Paris</p>
						</figcaption>
					</figure>
				</a>
				<a href="#" class="tilter tilter--3">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/6.jpg" alt="img06" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Peter Dreifuss</h3>
							<p class="tilter__description">Berlin</p>
						</figcaption>
					</figure>
				</a>
			</section>
			<section class="content content--c4">
				<a href="#" class="tilter tilter--4">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/7.jpg" alt="img07" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Chritie Lehmann</h3>
							<p class="tilter__description">Miami</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--4">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/8.jpg" alt="img08" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Charles Wang</h3>
							<p class="tilter__description">Hong Kong</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			<section class="content content--c5">
				<a href="#" class="tilter tilter--5">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/9.jpg" alt="img09" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Gary Freeman</h3>
							<p class="tilter__description">London</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--5">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/10.jpg" alt="img10" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Andrea Torchini</h3>
							<p class="tilter__description">Rome</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			<section class="content content--c6">
				<a href="#" class="tilter tilter--6">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/11.jpg" alt="img11" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Ben Wade</h3>
							<p class="tilter__description">Dublin</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--6">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/12.jpg" alt="img12" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Sam Yu</h3>
							<p class="tilter__description">Milan</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			<section class="content content--c7">
				<a href="#" class="tilter tilter--7">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/13.jpg" alt="img13" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Wilma Rex</h3>
							<p class="tilter__description">Amsterdam</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--7">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/14.jpg" alt="img14" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Jenny Bird</h3>
							<p class="tilter__description">Porto</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			<section class="content content--c8">
				<a href="#" class="tilter tilter--8">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/15.jpg" alt="img15" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Tanya Bondesta</h3>
							<p class="tilter__description">Toronto</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
				<a href="#" class="tilter tilter--8">
					<figure class="tilter__figure">
						<img class="tilter__image" src="img/2.jpg" alt="img02" />
						<div class="tilter__deco tilter__deco--shine"><div></div></div>
						<div class="tilter__deco tilter__deco--overlay"></div>
						<figcaption class="tilter__caption">
							<h3 class="tilter__title">Walter Anderson</h3>
							<p class="tilter__description">Stockholm</p>
						</figcaption>
						<svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
							<path d="M20.5,20.5h260v375h-260V20.5z" />
						</svg>
					</figure>
				</a>
			</section>
			
		<!--</main>-->
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/anime.min.js"></script>
		<script src="js/main.js"></script>
		<script>
		(function() {
			var tiltSettings = [
			{},
			{
				movement: {
					imgWrapper : {
						translation : {x: 10, y: 10, z: 30},
						rotation : {x: 0, y: -10, z: 0},
						reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
					},
					lines : {
						translation : {x: 10, y: 10, z: [0,70]},
						rotation : {x: 0, y: 0, z: -2},
						reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
					},
					caption : {
						rotation : {x: 0, y: 0, z: 2},
						reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
					},
					overlay : {
						translation : {x: 10, y: -10, z: 0},
						rotation : {x: 0, y: 0, z: 2},
						reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
					},
					shine : {
						translation : {x: 100, y: 100, z: 0},
						reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
					}
				}
			},
			{
				movement: {
					imgWrapper : {
						rotation : {x: -5, y: 10, z: 0},
						reverseAnimation : {duration : 900, easing : 'easeOutCubic'}
					},
					caption : {
						translation : {x: 30, y: 30, z: [0,40]},
						rotation : {x: [0,15], y: 0, z: 0},
						reverseAnimation : {duration : 1200, easing : 'easeOutExpo'}
					},
					overlay : {
						translation : {x: 10, y: 10, z: [0,20]},
						reverseAnimation : {duration : 1000, easing : 'easeOutExpo'}
					},
					shine : {
						translation : {x: 100, y: 100, z: 0},
						reverseAnimation : {duration : 900, easing : 'easeOutCubic'}
					}
				}
			},
			{
				movement: {
					imgWrapper : {
						rotation : {x: -5, y: 10, z: 0},
						reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
					},
					caption : {
						translation : {x: 20, y: 20, z: 0},
						reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
					},
					overlay : {
						translation : {x: 5, y: -5, z: 0},
						rotation : {x: 0, y: 0, z: 6},
						reverseAnimation : {duration : 1000, easing : 'easeOutQuad'}
					},
					shine : {
						translation : {x: 50, y: 50, z: 0},
						reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
					}
				}
			},
			{
				movement: {
					imgWrapper : {
						translation : {x: 0, y: -8, z: 0},
						rotation : {x: 3, y: 3, z: 0},
						reverseAnimation : {duration : 1200, easing : 'easeOutExpo'}
					},
					lines : {
						translation : {x: 15, y: 15, z: [0,15]},
						reverseAnimation : {duration : 1200, easing : 'easeOutExpo'}
					},
					overlay : {
						translation : {x: 0, y: 8, z: 0},
						reverseAnimation : {duration : 600, easing : 'easeOutExpo'}
					},
					caption : {
						translation : {x: 10, y: -15, z: 0},
						reverseAnimation : {duration : 900, easing : 'easeOutExpo'}
					},
					shine : {
						translation : {x: 50, y: 50, z: 0},
						reverseAnimation : {duration : 1200, easing : 'easeOutExpo'}
					}
				}
			},
			{
				movement: {
					lines : {
						translation : {x: -5, y: 5, z: 0},
						reverseAnimation : {duration : 1000, easing : 'easeOutExpo'}
					},
					caption : {
						translation : {x: 15, y: 15, z: 0},
						rotation : {x: 0, y: 0, z: 3},
						reverseAnimation : {duration : 1500, easing : 'easeOutElastic', elasticity : 700}
					},
					overlay : {
						translation : {x: 15, y: -15, z: 0},
						reverseAnimation : {duration : 500,easing : 'easeOutExpo'}
					},
					shine : {
						translation : {x: 50, y: 50, z: 0},
						reverseAnimation : {duration : 500, easing : 'easeOutExpo'}
					}
				}
			},
			{
				movement: {
					imgWrapper : {
						translation : {x: 5, y: 5, z: 0},
						reverseAnimation : {duration : 800, easing : 'easeOutQuart'}
					},
					caption : {
						translation : {x: 10, y: 10, z: [0,50]},
						reverseAnimation : {duration : 1000, easing : 'easeOutQuart'}
					},
					shine : {
						translation : {x: 50, y: 50, z: 0},
						reverseAnimation : {duration : 800, easing : 'easeOutQuart'}
					}
				}
			},
			{
				movement: {
					lines : {
						translation : {x: 40, y: 40, z: 0},
						reverseAnimation : {duration : 1500, easing : 'easeOutElastic'}
					},
					caption : {
						translation : {x: 20, y: 20, z: 0},
						rotation : {x: 0, y: 0, z: -5},
						reverseAnimation : {duration : 1000, easing : 'easeOutExpo'}
					},
					overlay : {
						translation : {x: -30, y: -30, z: 0},
						rotation : {x: 0, y: 0, z: 3},
						reverseAnimation : {duration : 750, easing : 'easeOutExpo'}
					},
					shine : {
						translation : {x: 100, y: 100, z: 0},
						reverseAnimation : {duration : 750, easing : 'easeOutExpo'}
					}
				}
			}];

			function init() {
				var idx = 0;
				[].slice.call(document.querySelectorAll('a.tilter')).forEach(function(el, pos) { 
					idx = pos%2 === 0 ? idx+1 : idx;
					new TiltFx(el, tiltSettings[idx-1]);
				});
			}

			// Preload all images.
			imagesLoaded(document.querySelector('main'), function() {
				document.body.classList.remove('loading');
				init();
			});

			// REMOVE THIS!
			// For Demo purposes only. Prevent the click event.
			[].slice.call(document.querySelectorAll('a[href="#"]')).forEach(function(el) {
				el.addEventListener('click', function(ev) { ev.preventDefault(); });
			});

			var pater = document.querySelector('.pater'),
				paterSVG = pater.querySelector('.pater__svg'),
				pathEl = paterSVG.querySelector('path'),
				paths = {default: pathEl.getAttribute('d'), active: paterSVG.getAttribute('data-path-hover')};

			pater.addEventListener('mouseenter', function() {
				anime.remove(pathEl);
				anime({
					targets: pathEl,
					d: paths.active,
					duration: 400,
					easing: 'easeOutQuad'
				});
			});

			pater.addEventListener('mouseleave', function() {
				anime.remove(pathEl);
				anime({
					targets: pathEl,
					d: paths.default,
					duration: 400,
					easing: 'easeOutExpo'
				});
			});
		})();
		</script>
	</body>
</html>